<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%--    用户管理--%>
    <meta charset="utf-8">
    <title>管理员注册用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/style/admin.css" media="all">


    <style>
        #selectBox {
            display: flex;
        }

        #updateHiddenBox {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            height: 80%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #updateMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        #addHiddenBox {
            position: absolute;
            left: 10%;
            /*top: 10%;*/
            display: none;
            width: 80%;
            height: 100%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #addMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        #editBanReasonHiddenBox {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            height: 80%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #editBanReasonMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        .layui-upload-list {
            display: block;
            margin: 10px 0;
            width: 102px;
            height: 102px;
            border: black 1px solid;
        }

        #demo1 {
            display: block;
            width: 102px;
            height: 102px;
            border-radius: 50%
        }

        .seeBox {
            display: block;
            z-index: 999999;
        }

        .userImgPath {
            border-radius: 50%;
            width: 28px;
            height: 28px;
        }

        #registerBox {
            width: 40%;
            height: 80%;
            margin: 178px auto 97px;
        }
    </style>

</head>
<body>


<div id="registerBox">
    <form class="layui-form" lay-filter="addForm" id="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" id="addUserName" required lay-verify="required"
                       placeholder="请输入姓名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-inline">
                <input type="text" name="userNickname" id="addUserNickname" required lay-verify="required"
                       placeholder="请输入昵称"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <%--            <div class="layui-form-item">--%>
        <%--                <label class="layui-form-label">系统密码</label>--%>
        <%--                <div class="layui-input-inline">--%>
        <%--                    <input type="text" name="systemPassword" id="addSystemPassword" required lay-verify="required" placeholder="请输入密码"--%>
        <%--                           autocomplete="off" class="layui-input">--%>
        <%--                </div>--%>
        <%--            </div>--%>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="userPhone" id="addUserPhone" required lay-verify="required|phone|number"
                       placeholder="请输入电话"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="addBirthday" lay-verify="required" name="birthday"
                       autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">身份证</label>
            <div class="layui-input-inline">
                <input type="text" name="idCard" id="idCard" required lay-verify="required|idCard"
                       placeholder="请输入身份证信息"
                       autocomplete="off" class="layui-input">

                <div class="layui-form-mid layui-word-aux">用户初始化密码为 666666</div>
            </div>
        </div>

        <%--        <input type="text" id="imgPath" name="imgPath" hidden>--%>

        <%--        &lt;%&ndash;头像上传&ndash;%&gt;--%>
        <%--        <div class="layui-form-item" style="margin-left: 110px">--%>
        <%--            <div class="layui-inline">--%>
        <%--                &lt;%&ndash;                    <div class="layui-upload">&ndash;%&gt;--%>
        <%--                <button type="button" class="layui-btn" id="uploadImg">上传头像</button>--%>
        <%--                &lt;%&ndash;                    </div>&ndash;%&gt;--%>
        <%--            </div>--%>
        <%--        </div>--%>

        <%--        &lt;%&ndash;            <div class="layui-form-item" >&ndash;%&gt;--%>
        <%--        &lt;%&ndash;                <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->&ndash;%&gt;--%>
        <%--        <div class="layui-upload-list" style="margin-left: 110px;border-radius: 50%">--%>
        <%--            <img class="layui-upload-img" id="demo1">--%>
        <%--            <p id="demoText"></p>--%>
        <%--        </div>--%>


        <%--                </div>--%>
        <%--            </div>--%>


        <%--            <div class="layui-form-item">--%>
        <%--                <label class="layui-form-label">状态</label>--%>
        <%--                <div class="layui-input-block">--%>
        <%--                    <select name="status" lay-verify="required" id="addStatus">--%>
        <%--                        <option value="1">正常</option>--%>
        <%--&lt;%&ndash;                        <option value="0">封禁</option>&ndash;%&gt;--%>
        <%--                    </select>--%>
        <%--                </div>--%>
        <%--            </div>--%>
        <div class="layui-form-item">
            <label class="layui-form-label">职位</label>
            <div class="layui-input-block">
                <select name="occupationType" lay-verify="required" id="addOccupationType">
                    <option value="3">业主</option>
                    <option value="1">管理员</option>
                    <option value="2">物业维修人员</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <%--                    <button class="layui-btn" type="button" id="addUserButton">添加用户</button>--%>
                <button class="layui-btn" type="button" lay-submit lay-filter="addUserButton" id="addUserButton">
                    添加用户
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <%--                <button type="button" class="layui-btn layui-btn-primary" id="addReturnWindows">返回</button>--%>
            </div>
        </div>
    </form>
</div>



<script src="${pageContext.request.contextPath}/wangEditor/js/wangEditor.min1.js"></script>
<script src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'layer', 'laydate', 'upload'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            admin = layui.admin,
            laydate = layui.laydate
            , upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadImg'
            , url: '${pageContext.request.contextPath}/file/upload' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                console.log(res);
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                } else {
                    $("#imgPath").val(res.data[0]);
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //时间插件
        //执行一个laydate实例
        laydate.render({
            elem: '#addBirthday' //指定元素
        });

        laydate.render({
            elem: '#updateBirthday' //指定元素
        });

        // form.on('submit(addUserButton)', function (data) {
        //     layer.msg(JSON.stringify(data.field));
        //     return false;
        // });

        form.on('submit(addUserButton)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            var data = data.field;
            $.ajax({
                url: "${pageContext.request.contextPath}/user/addUser",
                type: "post",
                data: JSON.stringify(data),
                contentType: 'application/json',
                processDate: false,
                success: function (res) {
                    if (res.code == 0) {
                        console.log(res)
                        layer.msg("注册用户成功，将在3秒后跳转到登录页");
                        setTimeout(function () {
                            location.href = "${pageContext.request.contextPath}/user/loginView";
                        }, 3000);
                    } else {
                        layer.msg(res.msg);
                    }
                }
            })
            return false;
        });

        form.verify({
            idCard: [
                /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, '请输入正确身份证'
            ]
        })


        <%--$("#addUserButton").click(function () {--%>
        <%--    var data = form.val("addForm");--%>
        <%--    // console.log(data);--%>
        <%--    verification(data);--%>
        <%--    // console.log(2)--%>
        <%--    $.ajax({--%>
        <%--        url: "${pageContext.request.contextPath}/user/addUser",--%>
        <%--        type: "post",--%>
        <%--        data: JSON.stringify(data),--%>
        <%--        contentType: 'application/json',--%>
        <%--        processDate: false,--%>
        <%--        success: function (res) {--%>
        <%--            // console.log(res);--%>
        <%--            $("#addMainBox").css("display", "none");--%>
        <%--            $("#addHiddenBox").css("display", "none");--%>
        <%--            refreshAddUserForm()--%>
        <%--            userListTable.reload();--%>
        <%--            return;--%>
        <%--        },--%>
        <%--        error: function () {--%>
        <%--            $("#addMainBox").css("display", "none");--%>
        <%--            $("#addHiddenBox").css("display", "none");--%>
        <%--            refreshAddUserForm();--%>
        <%--            userListTable.reload();--%>
        <%--            return;--%>
        <%--        }--%>
        <%--    })--%>
        <%--});--%>

        // 使添加用户表单刷新
        // function refreshAddUserForm() {
        //     // console.log(3);
        //     form.val("addForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
        //         "userName": '' // "name": "value"
        //         , "userNickname": ''
        //         , "systemPassword": ''
        //         , "userPhone": ''
        //         , "birthday": ''
        //     });
        // }


    })
</script>
</body>
</html>